<!-- 首页 -->
<template>
	<view class="wrapper">
		<view class="self-formitem" :class="{'formitem-focus':isFocus,'formitem-bottom-border':border==='bottom','formitem-border':border==='around'}">
			<view class="" style="line-height: 32rpx;">
				<image src="/static/images/login/required.png" class="width-8" mode="widthFix" v-if="required"></image>
				<text class="f-s12" style="padding-left: 4rpx;color: #585D66;">{{title}}</text>
			</view>
			<view class="m-t3">
				<input type="text" :value="value" :placeholder="placeholder" placeholder-class="placeholder-style"
					cursor-color="#FE3F59" :maxlength="maxlength" @focus="handleInputFocus" @input="handleInput" @blur="handleInputBlur" :class="checkInput"
					v-if="type === 'input'" />
				<view v-if="type==='textarea'">
					<u-textarea v-model="value" :placeholder="placeholder" count border="none" height="250rpx"
						placeholderClass="textarea-placeholder" :maxlength="maxlength" style="color:#202020;"
						@focus="handleInputFocus" @input="handleTextareaInput" @blur="handleInputBlur"></u-textarea>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		props: {
			value: {
				type: [String, Number],
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			required: {
				type: Boolean,
				default: true
			},
			border: {
				type: String,
				default: 'around'
			},
			placeholder: {
				type: String,
				default: ''
			},
			readonly: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: 'input'
			},
			maxlength: {
				type: Number,
				default: 100
			},
		},
		data() {
			return {
				isFocus: false
			}
		},
		computed: {
			checkInput() {
				if (this.readonly) return 'readonly'
				if (this.disabled) return 'disabled'
			}
		},
		methods: {
			handleTextareaInput(val){
				this.$emit('input',val)
			},
			handleInput(event){
				this.$emit('input',event.detail.value)
			},
			handleInputBlur() {
				this.isFocus = false
			},
			handleInputFocus() {
				this.isFocus = true
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrapper {
		.self-formitem {
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 14rpx 24rpx;
			margin: 0 auto;

			.placeholder-style {
				font-weight: 400;
				font-size: 30rpx;
				color: #B2B8C1;
				line-height: 42rpx;
			}

			input {
				color: #202020;
				font-weight: 400;
				font-size: 30rpx;
				line-height: 42rpx;
			}
		}
		.formitem-border{
			border: 1rpx solid #DDE0E6;
		}
		.formitem-bottom-border{
			border:none;
			border-radius: 0;
			border-bottom: 1rpx solid #DDE0E6;
		}
		.formitem-focus {
			border-width: 4rpx;
			border-color: #202020;
		}

		.readonly {
			pointer-events: none;
		}

		.disabled {
			pointer-events: none;
		}

		::v-deep .textarea-placeholder {
			font-weight: 400;
			font-size: 30rpx;
			color: #B2B8C1;
			line-height: 42rpx;
		}

		::v-deep .u-textarea {
			padding: 0;
			font-weight: 400;
			font-size: 30rpx;
		}

		::v-deep.uni-textarea-textarea {
			color: #202020 !important;
		}
	}
</style>